圖片來源

今天來分享一下程式語言超入門，
基本上是以真的真的完全不知道程式是什麼為基礎的文章，
雖然說有一些看起來是專有名詞但是其實所講述的其實並不會很難理解。
如果你對程式很有興趣那不妨可以看看，
如果你有一定的程式基礎也許也可以應證一下你所想的對不對。
那我們開始囉~

Note: 以下會將 JavaScript 縮減寫成 JS ，
老司機們就不用多說明你懂的！新手也不要慌張，就只是縮寫而已。

程式碼

程式碼 aka Code ，
也就是我們常說的一個程式 ( program ) 或是原始碼 ( source code )。

而電腦語言你就將他當作是一種語言，例如英文以特定的格式和規範這樣，電腦語言也同等道理。

敘句

簡單來說就是一句話的意思
以 JS 來說就長這樣

a = 1 + 2;

請把你以前數學的想法都拋之腦後，
你會想說數學等號左右相等所以 a = 3，
但是這邊其實是指將右方的運算結果儲存至左方。
所以是 1 + 2 算好等於 3 ，並儲存至 a 這個變數。

而你可能會發現

欸！最後有一個分號 ; 是什麼意思？

你就把它當作中文的句號 。 或是英文的句號 .
而程式主要在說的就是由多個敘句所組成的。
看到這邊其實聽起來不難吧！

運算式

剛剛知道了敘句之後這個應該就沒什麼問題了，
運算式就是由值或是變數與運算子(等等接著會說)所組成的就是運算式。
而剛剛看到的是也是。
那來看看下方的範例

a + 1;

以數學角度來看，看起來沒什麼問題啊！
但是對於程式來說其實沒什麼路用而且不常見 xDD
主要原因是他就算完然後沒有額外對任何變數作儲存或是處理。
對沒錯！
就是做爽的xD

運算子

我這邊稍為統整順便和說明一下 JS 常見的運算子

指定

= ，剛剛我在敘句所提到的應該還沒忘吧，右手邊的東西放到左手邊。

數學

這聰明的你一定知道
+、-、*(乘)、/(除)。
這邊就不多作介紹，如果你真的不懂xD
可以不要害羞在底下留言跟我說
我保證不笑出聲

複合指定

不要怕！這就是將上面兩個提到的東西尬在一起而已。
範例：
a += 1
其實就只是 a = a+1
舉一反三!
所以 +=、-=、*=、/=這些都是唷。

遞增和遞減

++ 、--
就是... +1 和 -1的意思。
a++ 就等同於 a = a+1
a-- 就等同於 a = a-1

存取物件的特性

.，把它想成中文的，你可能會比較好理解。
中文: 一輛車"的"椅子
轉成
程式: car.chair
所以這邊程式就會抓到車子的椅子的特性
可能是紅色啊或是哪個廠牌的等等。
這個之後會講到物件(Object)
你會更能理解~

相等性

== 寬鬆相等、=== 嚴格相等、!= 寬鬆不相等、!== 嚴格不相等。
不要緊張這些明天我就會一一作說明，現在你只要把它當作數學的相等和不相等。
主要差別是在於說型態是否會強制轉型。

比較

>、<、>=、<=
這些數學都看過了不用多說了吧。

邏輯

|| (or) 、 && (and)
之後也會對這邊特別說明條件式。
這邊稍為做一點點的範例，
你可以先從以下看出一些端倪和差異~

1 || 0 // true
0 || 0 // false
1 && 1 // true
1 && 0 // false

值與型別

下篇會有詳細的介紹
但是這邊基本介紹一下
先以生活案例來說

今天昌彥買了一隻 3000 元的 手機。

3000 -> 數字
手機 -> 物品

程式也有型別，在對值操作時或是要表達時會依據你的需求去選擇，
而先以上述範例在程式中

3000 -> Number
手機 -> String

註解

在日常生活中我相信買一些 3C 產品時，都會附贈一些說明書，
那通常呢...大部分人都會直接忽略，當有問題時，
就會翻開說明書看一下說明，找出問題在哪和使用說明，
而註解也差不多是這種淺移默化的存在
並且是會直接被忽略不會被執行，
也就是在裡面寫任何邏輯或是敘句也都會被忽略。

JS 中有兩種註解可以使用

1. 單行註解
   顧名思義就是只註解一行

• 用法：
  前面加上 //
• 範例：
  c = a + 1; // c 是 a 加一

2. 多行註解
   假使說你有很東西要註解或是要跨很多行，
   那多行註解就可以讓你不用每行都 // 。

• 用法
  開頭 /* 中間包內容，結尾 */。
• 範例

  /* 我怎麼都不會被執行
     因為我是註解啊!
     你想知道答案嗎？
     去找吧！
     我把所有答案都放在那裡 */
  c = a + 1;
  

Note:

大學時教授總是說:
要寫註解啊！不然誰看得懂你在寫什麼?
但實際上不是每行程式都需要註解，
程式需要的是一個文件，
而在 JS 中有一個東西叫 JSDoc
他長的就是註解，但是他其實是一個以文件形式存在的註解。

區塊

aka Block，還記得那年夏天你在高中的課堂上的計概課嗎？
老師溫柔的握著你的手教你把 Block 畫出來... (夢到的)

{
...
}

如上述所見，JS 的區塊是以大括號把東西包起來~
而單一單純的大括號包起來在日常生活中幾乎是看不到的，
因為他通常會附加在一些控制敘句上( if、while、for ...等等)

條件式

日常生活中我們常常說，"如果"怎麼樣我們就怎麼樣，
這個如果後面就會加上一些條件，
譬如說
如果我超過18歲，我就已經老了。
如果我完成鐵人賽，我就買一台 Macbook Pro 犒賞自己。
...
之類的

那我們程式也有這種機制是可以判斷一些條件，
再決定該做什麼
不囉唆直接來範例！

var age = 23;
if( age > 18 ){
    console.log("唉...")
    console.log("老了")
}
console.log(`我已經${age}歲了`)

output:

唉...
老了
我已經23歲了

這邊要表述的是當條件達成時(年齡大於18歲)就會執行該 Block 內的敘句。

迴圈

日常生活中是不是很常看到新聞有奧客在跟店員跳針，
無限循環某件事或某句話。
而我們程式也可以！(驕傲個屁 xD)
改寫上面條件式的一個地方我們就可以無限的看到一直哀怨xDD

while

var age = 23;
while( age > 18 ){
    console.log("唉...")
    console.log("老了")
}

output:

唉...
老了
唉...
老了
唉...
老了
唉...
老了
...

是不是很簡單？
而迴圈不只有 while 還有 do while 和 for

do while

var age = 23;
do {
    console.log("唉...")
    console.log("老了")
} while( age > 18 );

output:

唉...
老了
唉...
老了
唉...
老了
唉...
老了
...

Note:
這邊結果看起來相同，但是實質上如果判斷式不等於的話其實 do while 至少會做一次。

For

For 就會比剛剛的兩個 while 看起來還要複雜一些，
但是你不用擔心，他其實很實用且比想像中簡單。
他有三個參數

1. 初始化子句
2. 條件測試子句
3. 更新子句

直接看範例

for (let age = 17 ; age < 28 ; age++){
    console.log("還年輕")
}
console.log("老了")

let age = 17
初始化子句，就是一開始初始值設定多少，我這邊就是設定17歲。
age < 28
條件測試子句，什麼條件下執行，我設定 28歲以內(不含)。

age++
更新子句，執行完一輪時最後要做的動作，這邊將年齡 +1。

output:

還年輕
還年輕
還年輕
...
老了 // 此時 age 變數已經 28 歲了

Break

如果想要中途停止迴圈的執行，那 Break 你就會用到，
以 while 迴圈為範例

var age = 18;
while( age < 28 ){
    console.log("唉...")
    console.log("老了")
    if( age === 20) break;
}

那他就會在 age 為 20 時跳出迴圈。

小總結

整理一下

• while (常用)
  先判斷條件再執行
• for (常用)
  先判斷條件再執行
• do while
  先執行在判斷條件

函式

你有想過當你寫一個功能時，會需要一直重複使用它，該如何是好！？
這時候函式就是你最佳良伴！
為了不讓你寫程式像是手動一樣一直重複寫，你就需要把功能變成一個函式，讓他可以不斷的被重複利用~
這邊做一個簡單的小範例

funtion repeatMyName(name,times){
    for(let n =1 ; n < times ; n++){
        console.log(name);
    }
}

repeatMyName("Robin",10);

output:

Robin
Robin
Robin 
... //重複總共十次

這邊做的就是我寫一個函式名為 repeatMyName，需要的參數是 name和 times，而做的事情就是重複印出指定次數的名字。

而呼叫參數的方式就是剛剛定義的 repeatMyName後面加上()，
接著裡面帶參數(argument)。

跑吧程式！

所謂跑程式就是執行的意思啦，

剛剛提到的一個程式是由多個敘句所組成的，
而你可以把它想成中文撰寫一篇文章所想闡述的事情，
而程式就是告訴電腦該怎麼做。

而我們寫的這些程式，其實電腦都...
看不懂xDDD

所以我們需要一些特殊的工具來翻譯成電腦看得懂的語言，
這邊就是我們常聽到的直譯器或是編譯器啦。
簡單來說...
直譯器就是翻一行做一行
編譯器就是我全部翻譯完了在做
這邊有一個馬哥的文章很香有興趣可以了解一下
資訊科普: 直譯器與編譯器的差別在哪裡?

說了這麼多是不是很想知道怎到底怎麼跑呀？
正在用電腦看文章的你
Windows 請按 F12
Mac 請按 command + option + i
Ubuntu 請按 ctrl +shift + i

如果以上都不行請參照以下

打開之後第一次接觸的你一定是一臉矇逼，
沒關係來！
我們直接切入主題讓你知道程式跑起來的感覺。

接著你就看到底下有一塊可以讓你輸入的地方。
我這邊就輸入我的名字 robin 放進名為name的變數 。

var name = 'robin'

然後再輸入一次剛剛所取名的變數 name

就 show 出我的名字啦~

此篇到此分享完畢！

第一天心得

翻開書的第一章節想說太簡單了吧，
寫著文章和想辦法敘述的讓真的初心者能夠懂真的是...
哈哈哈哈
哈哈哈
哈哈
哈
嗚嗚嗚
好累QQ

還不按讚分享加訂閱!（跑錯棚）

今天到此結束
感恩你讀到這還不關掉頁面看我在講幹話
明天見~

參考來源：

你所不知道的 JS｜導讀，型別與文法 (You Don't Know JS: Up & Going)